<template>
  <div>
    <Header style="box-shadow: 0 1px 10px 0 #dfdfdf; height:64px; padding:0 28px;">
      <template slot="left">
        <div class="left" @click="drawer = true">
          <i class="el-icon-menu"></i>
        </div>

        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
          <el-breadcrumb-item :to="{ path: '/main' }">我的课堂</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/main/classDetail' }">课程内容</el-breadcrumb-item>
          <el-breadcrumb-item>作业详情</el-breadcrumb-item>
        </el-breadcrumb>

        <el-drawer :visible.sync="drawer" :direction="'ltr'" size="240px">
          <template slot="title">
            <div style="width: 96px">
              <img src="https://www.ketangpai.com/images/common/logo_blue.png" alt="logo" height="24px">
            </div>
          </template>
          <el-menu class="menu">
            <el-menu-item style="width: 100%" v-for="(item, index) in menus" :key="index" @click="toNav(item.route)">
              <span>{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-drawer>
      </template>

      <template slot="right">
        <RightHeader style="position: absolute; right: 20px; top: 15px;" />
      </template>
    </Header>
    <div style="margin-top: 20px;">
      <div class="cmps-homework-review">
        <el-tabs v-model="activeNav">
          <el-tab-pane label="详情" name="first" class="view-homework-detail">
            <Work></Work>
          </el-tab-pane>
          <el-tab-pane label="批阅" name="second" v-if="type != 0">
            <Read></Read>
          </el-tab-pane>
          <el-tab-pane label="提交作业" name="three" v-else>
            <SubmitWork></SubmitWork>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import circleUrl from "../../assets/classDetail/work.png";
import Header from "../../components/header/HeaderPage.vue";
import RightHeader from "../../components/header/RightHeader.vue";
import Work from "./work/index.vue";
import Read from "./read/index.vue";
import SubmitWork from "./submitWork/index.vue";
import {postRequest} from "@/utils/api";

export default {
  name: "HomeWork",
  components: {
    RightHeader,
    Header,
    Work,
    Read,
    SubmitWork,
  },
  data() {
    return {

      circleUrl: circleUrl,
      drawer: false,
      type: '',
      menus: [
        {
          name: '我的课堂',
          route: '/main'
        },
        {
          name: '备课区',
          route: '/lessonPreparationArea'
        },
        {
          name: '虚拟教研室',
          route: '/teachingResseach'
        }
      ],
      activeNav: 'first',
    }
  },
  methods: {
    getTypeByUserId() {
      const userId = JSON.parse(localStorage.getItem('UserInfo')).id;//this.$store.getters.user.id;
      const courseId = localStorage.getItem('courseId');//this.$store.getters.courseId;
      const data = { userId, courseId };
      postRequest('/userCourse/list', data).then(res => {
        if (res) {
          this.type = res.data.data.list[0].type;
        }
      })
    },
    // 跳转页面
    toNav(nav) {
      this.$router.push(nav)
    },
  },
  created() {
    this.getTypeByUserId();
  }
}
</script>

<style scoped lang="less">
.left {
  margin-right: 15px;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.menu {
  font-weight: 600;
}

.cmps-homework-review {
  min-width: 1024px;
  max-width: 1224px;
  margin: 0 auto;
  font-size: 12px;
  background-color: #fff;

  .view-homework-detail {
    width: 1224px;
    margin: 0 auto;
    padding-top: 12px;
    padding-bottom: 40px;
  }
}

/deep/ .el-tabs__nav-wrap::after {
  background: none;
}
</style>
